<template>
    <div class="login">
        <div class="back"  @click="backAction">
           <i class="iconfont icon-xiangzuo1"></i>
        </div>
        <form @submit.prevent="login" >
        <div class="top-hat"></div>
        <div class="login-box">
        <div class="login-wrapper">
            <!-- logo -->
            <div class="logo"></div>
            <!-- 登录 -->
                <div class="input-group">
                    <input type="tel" id="cm_code"  maxlength="11" v-model="phone" placeholder="手机号"/>
                    <!-- :disabled="!yzPhone" -->
                    <a class="getcode" 
                    :class="{yz_phone:yzPhone}" 
                    @click.prevent="getCode" >
                    {{computeTime > 0 && yzPhone?`已发送(${computeTime}s)`:'获取验证码'}}</a>
                </div>
                <div class="input-group">
                    <input type="password" maxlength="8"  placeholder="验证码" id="code" v-model="code"/>
                </div>
                <div class="input-desc">
                    <input type="radio" 
                    class="radio-btn" 
                    @click="toggleCheck" :checked="radioCheck?'checked':''" />
                    <a herf="javascript:;">《用户服务协议》</a>和<a herf="javascript:;">《隐私权政策》</a>
                </div>
            
            </div>
        </div>
        <button class="reg">
          登录
        </button>
        </form>
        <alert-tip :alertText="alertText" v-show="showAlert" @closeTip="closeTip"></alert-tip>
    </div>
    
</template>

<script>

import AlertTip from '../components/AlertTip.vue'
export default {
    components:{
        AlertTip
    },
    data() {
        return {
            phone:'', // 手机号 
            code:'',// 短信验证码
            computeTime:0, //计时
            showAlert: false, // 是否显示提示框 
            alertText: '', // 提示框文本

            radioCheck: false
        }
    },
    methods: {
        // 显示提示框的方法
        showText(alertText){
            this.showAlert = true; 
            this.alertText = alertText;
        },
        // 关闭提示框
        closeTip(){
            this.showAlert = false;
             this.alertText = '';
        },
        backAction(){
            this.$router.go(-1);
        },
        toggleCheck() {
            this.radioCheck =!this.radioCheck
        },
        // 异步获取短信验证码
        async getCode(){
            if(!this.phone){
                this.showText('手机号不能为空')
                return false
            } 
            else if(!this.yzPhone){
                // 手机号不正确
                this.showText('手机号不正确')
                return false
            }
            // 如果当前没有计时
            else if(!this.computeTime){
                // 启动计时
                this.computeTime = 30;
                const interId = setInterval(() => {
                    if(this.computeTime > 0){
                        this.computeTime--;
                    }else{
                        // 停止计时
                        clearInterval(interId);
                    }
                }, 1000);
               
            }
            
        },
        // 异步登录
        async login(){
            // 前台表单验证
            if(this.phone === '' && this.code === ''){
                this.showText('手机号和验证码不能为空')
                return false
            }
            else if(!this.yzPhone){
                // 手机号不正确
                this.showText('手机号不正确')
                return false
            }else if(!(/^\d{6}$/gi.test(this.code))){
                // 验证码为6位数字
                this.showText('验证码不正确')
                return false
            }else{
                this.userInfo = {id:666,name:'君莫笑',phone:'18381072971'}
                this.$store.dispatch('recordUser',this.userInfo);
                this.$router.replace('/profile');
            }
           
        }
    },
    computed: {
        yzPhone(){
            return /^1\d{10}$/.test(this.phone)
        }
    },
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
html,
body,
#app
    height 100%
    .login
        background #41B883
        height 100%
        overflow hidden
        .back
            width 2rem
            height 2rem
            background rgba(0,0,0,.2)
            border-radius 50%
            position relative
            margin 0.8rem
            .iconfont
                color #fff
                font-size 1rem
                position absolute
                top 50%
                left 50%
                transform translate(-50%,-50%)
        .top-hat
            width 15rem
            height 1rem
            border-radius 1rem 1rem 0 0
            margin 1rem auto 0
            background #eee
        .login-box
            width 16rem
            height 20rem
            background #fff
            margin 0 auto
            border-radius 0.4rem
        .login-wrapper
                padding-top 2rem
                .logo
                    width 10rem
                    height 6rem
                    margin 0 auto 2rem
                    background url(../assets/onself/logo.jpg)
                    background-size cover
                .input-group
                    display flex
                    justify-content: space-between
                    width 14rem
                    height 2.2rem
                    line-height 2.2rem
                    padding 0 0.5rem
                    font-size 0.8rem
                    border 1px solid #ccc
                    border-radius 0.5rem
                    margin 0 auto 0.8rem 
                    color #ccc
                    box-sizing: border-box;
                    input
                        width 8rem
                    .getcode
                        &.yz_phone
                           color #41B883
                    &:hover
                        border-color #41B883
                .input-desc
                    display flex 
                    align-items center
                    width 14rem
                    margin 0 auto
                    color #ccc
                    font-size 0.6rem
                    letter-spacing 0.1rem
                    line-height 1rem
                    a
                        color #41B883
            .reg
                display: block;
                width 16rem
                height 2.2rem
                line-height 2.2rem
                background #fff
                color #41B883
                margin 0.4rem auto 0
                font-size 1rem
                border-radius 0.8rem
                font-weight bold   
    
</style>